<template>
    <div>
        <div class="container_box">
            <el-button type="primary"
                       @click="back">返回</el-button>
            <div class="steps u-flex u-row-center">
                <div v-for="(item,index) in stepList"
                     :key="index"
                     class="step step_r"
                     :class="{'active': stepIndex == (index+1)}">
                    <div style="position:absolute;right:-42px;height:40px;width:80px;overflow:hidden;">
                        <div class="rotateBox"></div>
                    </div>
                    <div class="step_b">
                        {{ item.text }}
                    </div>
                </div>
            </div>
        </div>
        <el-upload style="display:none"
                   :http-request="uploadHttp"
                   :on-progress="zzUpload"
                   :action="uploadActionUrl"
                   list-type="picture"
                   :multiple="false"
                   name="files">
            <el-button size="small"
                       type="primary">点击上传</el-button>
            <div slot="tip"
                 class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
        </el-upload>
        <div class="padding_box">
            <div v-show="stepIndex == 1"
                 class="container_box">
                <div class="container_title">基本信息</div>
                <el-form ref="form"
                         :model="editProduct"
                         :rules="rules"
                         label-width="80px">
                    <el-form-item label="封面图片"
                                  prop="pic">
                        <el-upload class="avatar-uploader"
                                   :action="uploadActionUrl"
                                   :http-request="uploadHttp2"
                                   name="files"
                                   :on-progress="zzUpload"
                                   :limit="1">
                            <img v-if="editProduct.pic"
                                 :src="editProduct.pic"
                                 class="avatar">
                            <i v-else
                               class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="轮播图片">
                        <el-upload :http-request="uploadHttp3"
                                   action=""
                                   list-type="picture-card"
                                   :on-remove="handleRemove"
                                   name="files">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <!-- <el-dialog :visible.sync="dialogVisible">
                            <img width="100%"
                                 :src="dialogImageUrl"
                                 alt="">
                        </el-dialog> -->
                    </el-form-item>
                    <!-- <el-form-item label="主图视频">
                        <el-upload class="video-uploader"
                                   :action="uploadActionUrl"
                                   :on-preview="handleVideoPreview"
                                   :on-progress="uploadVideoProcess"
                                   :on-success="handleUploadVideoSuccess"
                                   name="files"
                                   :limit="1">
                            <video class="video"
                                   width="100%"
                                   v-if="mainVideo && !videoFlag"
                                   controls
                                   :src="mainVideo"></video>
                            <i v-else-if="!mainVideo && !videoFlag"
                               class="el-icon-plus video-uploader-icon"></i>
                            <el-progress v-if="videoFlag"
                                         type="circle"
                                         :percentage="videoUploadPercent"
                                         style="margin-top:30px;"></el-progress>
                        </el-upload>
                   
                    </el-form-item> -->
                    <el-form-item label="课程名称"
                                  prop="name"
                                  style="width:40%">
                        <el-input v-model="editProduct.name"></el-input>
                    </el-form-item>
                    <el-form-item label="是否上架">
                        <el-radio-group v-model="editProduct.online">
                            <el-radio :label="true">上架</el-radio>
                            <el-radio :label="false">下架</el-radio>
                        </el-radio-group>

                    </el-form-item>
                    <!-- <el-form-item label="参与分佣">
                        <el-radio-group v-model="editProduct.commission">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item> -->
                    <el-form-item label="市场价">
                        <el-input onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                                  v-model="editProduct.originalPrice"
                                  placeholder="请输入市场价"></el-input>
                    </el-form-item>
                    <el-form-item label="成本价">
                        <el-input onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                                  v-model="editProduct.price"
                                  placeholder="请输入成本价"></el-input>
                    </el-form-item>
                    <el-form-item onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                                  label="销售价">
                        <el-input v-model="editProduct.salePrice"
                                  placeholder="请输入销售价格"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="销量">
                        <el-input v-model="editProduct.sale"
                                  placeholder="请输入销量"></el-input>
                    </el-form-item> -->
                    <el-form-item label="单位">
                        <el-input v-model="editProduct.unit"
                                  placeholder="请输入单位"></el-input>
                    </el-form-item>
                    <el-form-item label="分类">
                        <el-cascader ref="myCascader"
                                     clearable
                                     filterable
                                     separator=">"
                                     placeholder="请选择课程分类"
                                     v-model="productCategory"
                                     @change="handleChange"
                                     :options="productCategoryList"
                                     :props="{ expandTrigger: 'hover', checkStrictly: true, value:'id',label:'name',children:'subCategory', }">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="详情内容">
                        <quill-editor ref="QuillEditor"
                                      v-model="editProduct.detailTabs[0].tabDetails"
                                      :options="editorOption"></quill-editor>
                    </el-form-item>
                    <el-form-item style="width:100%"
                                  label="备注">
                        <el-input type="textarea"
                                  :rows="4"
                                  placeholder="备注"
                                  v-model="editProduct.note">
                        </el-input>
                    </el-form-item>
                    <el-form-item style="text-align: right;">
                        <el-button @click="$router.go(-1)">取 消</el-button>
                        <el-button v-if="stepIndex > 1"
                                   @click="previousStep">上一步</el-button>
                        <el-button @click="nextStep">下一步</el-button>
                        <!-- <el-button @click="saveEdit"
                                   type="primary">保 存</el-button> -->
                    </el-form-item>
                </el-form>
            </div>

            <div v-show="stepIndex == 2"
                 class="container_box">
                <div class="container_title">价格库存</div>
                <el-form ref="form"
                         :model="editProduct"
                         label-width="80px">
                    <el-form-item label="规格类型"
                                  prop="specifications">
                        <el-radio-group v-model="specifications">
                            <!-- <el-radio label="single">统一规格</el-radio> -->
                            <el-radio label="many">多规格</el-radio>
                        </el-radio-group>
                        <div v-if="specifications == 'many'">
                            <div class="specifications-box">
                                <div v-for="(item,index) in specificationsList"
                                     :key="index"
                                     class="specifications-item">
                                    <el-form ref="form"
                                             :rules="specificationsRules"
                                             :model="item"
                                             label-width="80px">
                                        <div class="u-flex u-flex-row">
                                            <el-form-item label="规格名"
                                                          prop="name"
                                                          style="width:40%">
                                                <el-input v-model="item.name"
                                                          placeholder="请输入规格名"></el-input>
                                            </el-form-item>
                                            <el-form-item label="规格单位"
                                                          prop="unit"
                                                          style="width:40%">
                                                <el-input v-model="item.unit"
                                                          placeholder="请输入规格单位"></el-input>
                                            </el-form-item>
                                        </div>
                                        <el-form-item label="规格值"
                                                      prop="values">
                                            <div class="specifications-value u-flex u-flex-wrap">
                                                <div class="input-box"
                                                     v-for="(item1, index1) in item.values"
                                                     :key="index1">
                                                    <el-input placeholder="请输入规格值"
                                                              v-model="item.values[index1]">
                                                    </el-input>
                                                    <i class="el-icon-error"
                                                       @click="deleteSpecificationsValue(item.values,index1)"></i>
                                                </div>
                                                <el-button size="mini"
                                                           type="primary"
                                                           @click="addSpecificationsValue(item.values)">添加规格值</el-button>
                                            </div>
                                        </el-form-item>
                                    </el-form>
                                    <i class="el-icon-error"
                                       @click="deleteSpecificationsItem(item,index)"></i>
                                </div>
                            </div>
                            <div style="float:right;">
                                <el-button size="mini"
                                           type="primary"
                                           @click="addSpecifications()">添加规格</el-button>
                                <el-button size="mini"
                                           type="success"
                                           @click="saveSpecifications()">保存</el-button>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="课程SKU"
                                  prop="specifications">
                        <div class="sku-box">
                            <div style="margin-bottom:25px;">
                                <div v-for="(item,index) in skuList"
                                     :key="index"
                                     class="specifications-value-box">
                                    <div class="specifications-title">规格名：{{ item.name }}</div>
                                    <div class="u-flex u-flex-wrap">
                                        <div class="specifications-value"
                                             v-for="(item1,index1) in item.values"
                                             :key="index1"
                                             :class="{ 'active': selectArr[index] == index1 }"
                                             @click="changeSpecification(index, index1,item.name,item1)">
                                            {{ item1 }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <t-table>
                                <t-tr align="center">
                                    <!-- <t-td>所选规格</t-td> -->
                                    <t-td>销售价格(分)</t-td>
                                    <t-td>市场价(分)</t-td>
                                    <t-td>销量</t-td>
                                    <t-td>赠送数量</t-td>
                                    <t-td>库存(个)</t-td>

                                    <t-td>是否上架</t-td>
                                    <!-- <t-td>是否参与分佣</t-td> -->
                                    <t-td>课程图</t-td>
                                </t-tr>
                                <t-tr align="center">
                                    <!-- <t-td class="u-flex-col">
                                        <span v-for="(item1,index1) in skuList"
                                              :key="index1"> {{ item1.values[selectArr[index1]] }} {{  (skuList.length>1 && index1 < skuList.length-1) ? '+' : ''  }}</span>
                                    </t-td> -->
                                    <t-td>
                                        <el-input placeholder="销售价"
                                                  v-model="skuData.price"
                                                  clearable></el-input>
                                    </t-td>
                                    <t-td>
                                        <el-input placeholder="市场价"
                                                  v-model="skuData.originalPrice"
                                                  clearable>
                                        </el-input>
                                    </t-td>
                                    <t-td>
                                        <el-input placeholder="销量"
                                                  v-model="skuData.sale"
                                                  clearable>
                                        </el-input>
                                    </t-td>
                                    <t-td>
                                        <el-input placeholder="赠送数量"
                                                  v-model="skuData.giveNum"
                                                  clearable></el-input>
                                    </t-td>
                                    <t-td>
                                        <el-input placeholder="库存"
                                                  v-model="skuData.stock"
                                                  clearable></el-input>
                                    </t-td>

                                    <t-td>
                                        <el-select v-model="skuData.online"
                                                   placeholder="请选择">
                                            <el-option label="是"
                                                       :value="true"></el-option>
                                            <el-option label="否"
                                                       :value="false"></el-option>
                                        </el-select>
                                    </t-td>

                                    <!-- <t-td>
                                        <el-input placeholder="请输入库存"
                                                  v-model="skuData.stock"
                                                  clearable>
                                        </el-input>
                                    </t-td> -->
                                    <!-- <t-td>
                                        <el-input placeholder="积分返还比率"
                                                  v-model="skuData.integralProportion"
                                                  clearable>
                                        </el-input>
                                    </t-td>
                                    <t-td>
                                        <el-input placeholder="积分抵扣比例"
                                                  v-model="skuData.pointsDeduction"
                                                  clearable>
                                        </el-input>
                                    </t-td> -->
                                    <!-- <t-td>
                                        <el-select v-model="skuData.commission"
                                                   placeholder="请选择">
                                            <el-option label="是"
                                                       :value="true"></el-option>
                                            <el-option label="否"
                                                       :value="false"></el-option>
                                        </el-select>
                                    </t-td> -->
                                    <t-td align="center">
                                        <el-upload class="avatar-uploader"
                                                   :action="uploadActionUrl"
                                                   :http-request="uploadHttp4"
                                                   name="files"
                                                   :on-progress="zzUpload">
                                            <img v-if="skuData.pic"
                                                 :src="skuData.pic"
                                                 class="avatar">
                                            <i v-else
                                               class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                    </t-td>
                                </t-tr>
                            </t-table>
                        </div>
                        <div style="float:right;">

                            <el-button size="mini"
                                       type="success"
                                       @click="saveSku()">保存SKU</el-button>
                        </div>
                    </el-form-item>

                    <el-form-item style="text-align: right;">
                        <el-button v-if="stepIndex > 1"
                                   @click="previousStep">上一步</el-button>
                        <!-- <el-button @click="nextStep">下一步</el-button> -->
                        <el-button @click="saveEdit"
                                   type="primary">保 存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import axios from '@/utils/axios.js';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';
import VueCropper from 'vue-cropperjs';
import { Loading } from 'element-ui';
import tTable from '@/components/t-table/t-table.vue';
import tTh from '@/components/t-table/t-td.vue';
import tTr from '@/components/t-table/t-tr.vue';
import tTd from '@/components/t-table/t-td.vue';
import bus from '@/common/bus.js';

// 工具栏配置
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],
    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction

    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],
    ['link', 'image', 'video'],
    ['clean']                                         // remove formatting button
]

export default {
    Uname: 'baseform',
    name: 'editor',
    data: function () {
        return {
            imgUrl: 'https://songsujiazhang.oss-cn-shenzhen.aliyuncs.com/2021/07/20/4f0af133-0c06-429b-93c9-ab4c68a6273f.jpg',
            uploadActionUrl: this.$urls + "api-file/files-anon?isAsync=false&access_token=" + sessionStorage.getItem('ms_token'),
            carouselVisible: false,
            largeImg: '',
            stepIndex: 1,
            // , { text: '3、预览效果' }
            stepList: [
                { text: '1、编辑基本信息' }, { text: '2、编辑价格库存' },
            ],
            // 当前编辑对象数据
            // editProduct: {
            //     detailTabs: [{ tabDetails: '' }],
            //     pic: '',
            // },
            editProduct: {
                detailTabs: [{ tabDetails: '', title: '' }],
                id: "",
                "albumPics": "",//轮播图
                "categoryId": "163126269829000110",//课程分类id
                "name": '',//课程名称
                "online": true,//是否上架
                "originalPrice": '',//市场价
                "pic": '',//课程图片
                "price": '',//成本价
                "salePrice": '',//销售价
                "type": 0,//课程类型
                // "brandName": "",
                // "categoryId": 0,
                "categoryName": "",
                "verifyStatus": true,
                "commission": false,
                // "description": "",

                // "freightFree": true,
                // "freightTemplateId": 0,
                // "integralProportion": 0,
                // "keywords": "",
                // "name": "",
                // "note": "",
                // "onlineStatus": true,
                // "otherSale": 0,
                // "pic": "",
                // "pointsDeduction": 0,
                // "promotionType": 0,
                // "sort": 0,
                // "type": 0,
                // "originalPrice": 0,
                // "salePrice": 0,
                // "price": 0,
                "skuList": [
                ],
            },
            // skuList: [
            //     {
            //         "commission": true,
            //         "giveNum": 0,
            //         "id": 0,
            //         "online": true,
            //         "originUnitPrice": 0,
            //         "pic": "",
            //         "price": 0,
            //         "productId": 0,
            //         "spDataList": [
            //             {
            //                 "key": "",
            //                 "value": ""
            //             }
            //         ]
            //     }
            // ],
            // 轮播图List
            carouselimg: [],
            // 课程分类回显idList
            productCategory: '163126269829000110',
            productCategoryList: [],
            editorOption: {
                modules: {
                    toolbar: {
                        container: toolbarOptions,  // 工具栏
                        handlers: {
                            'image': function (value) {
                                if (value) {
                                    document.querySelector('.el-upload').click()
                                    // this.onSubmit()
                                    // alert('自定义图片',value)
                                } else {
                                    this.quill.format('image', false);
                                }
                            }
                        }
                    }
                }
            },
            loaddingTip: {
                text: "正在上传,请稍等",
                background: "rgba(0, 0, 0, 0.7)"
            },
            specifications: 'many',
            rules: {
                pic: [{ required: true, message: '请选择封面图', trigger: 'blur' }],
                carouselimg: [{ required: true, message: '请选择轮播图照片', trigger: 'blur' }],
                productName: [{ required: true, message: '请输入课程名', trigger: 'blur' }],
                title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
            },
            specificationsRules: {
                name: [{ required: true, message: '请输入规格名', trigger: 'blur' }],
                unit: [{ required: true, message: '请输入规格单位', trigger: 'blur' }],
                values: [{ required: true, message: '请输入规格值', trigger: 'blur' }],
            },
            skuData: {
                pic: '',
                commission: false
            },
            skulistAll: [],
            carouselatr: [],
            zifu: '',
            selectArr: [],
            skuList: [],            // skt列表
            specificationsList: [
                { name: "", unit: '', values: [''] }
            ],         // 规格值列表
            input: '',
            mainVideo: '',
            videoFlag: false,
            videoUploadPercent: 0,
            mainVideoVisible: false,
            queryData: {
                pageNum: 1,
                pageSize: 10,
            },
        };
    },
    components: {
        quillEditor,
        VueCropper,
        tTable,
        tTh,
        tTr,
        tTd,

    },
    activated() {

    },
    watch: {
        selectArr: {
            handler(newVal, oldVal) {
                this.getSkuData(newVal.join('-'))
            },
            deep: true
        }
    },
    created() {
        if (this.$route.query.id) {
            // this.getData()
            this.getSku()
        }
        this.getProductCategory()
    },
    methods: {
        back() {
            this.$confirm('您即将离开该页面，页面信息会丢失是否确认离开？', '提示', {
                type: 'warning'
            }).then(() => {
                this.$router.go(-1)
            })
        },
        // 获取课程分类
        getProductCategory() {
            // this.$apis.productCategory().then(res => {
            //     if (res.resp_code == 0 && res.data.list) {
            //         this.productCategoryList = res.data.list
            //     }
            // })
            const params = this.queryData
            axios({
                url: "/admin/productCategory/listPage",
                method: "post",
                data: params
            }).then(result => {
                const { data } = result;

                this.productCategoryList = data.list;

            })
        },
        // 获取课程数据
        getData() {
            // axios({
            //     url: "/api-admin/product/" + this.$route.query.id,
            //     method: "get"
            // }).then(result => {
            //     if (result.resp_code == 0) {
            //         const { data } = result;
            //         this.editProduct = data;
            //         // this.pp = JSON.parse(data.specialSpec)
            //         let productCategoryArr = data.categoryIds.split(",")
            //         let albumArr = data.albumPics.split(',');
            //         let simg = [];

            //         if (productCategoryArr != '') {
            //             for (var i = 0; i < productCategoryArr.length; i++) {
            //                 productCategoryArr[i] = parseInt(productCategoryArr[i])
            //             }
            //         }

            //         for (var i = 0; i < albumArr.length; i++) {
            //             simg.push({ url: albumArr[i] })
            //         }
            //         // 产品分类
            //         this.productCategory = productCategoryArr
            //         // 轮播图
            //         this.carouselimg = simg
            //         // 规格
            //         if (data.specialSpec) {
            //             let specialSpec = JSON.parse(data.specialSpec)
            //             if (specialSpec.length > 0) {
            //                 this.specificationsList = JSON.parse(data.specialSpec)
            //             }
            //             // sku
            //             this.skuList = Object.assign({}, this.specificationsList)
            //         }
            //         console.log('>>>>>>>>>>>>>>>>>>>>>this.skuList', this.skuList)
            //         let indexes = []
            //         this.skuList.forEach(ele => {
            //             // 初始化默认选中第一个规格值
            //             indexes.push(0)
            //         });
            //         // .join('-')
            //         this.selectArr = indexes
            //     } else {
            //         this.$message.error(data.resp_msg || '失败');
            //     }

            // })
        },
        // 获取当前产品SKU
        getSku() {
            // axios({
            //     url: "/api-admin/productSku/getSkusByProductId/" + this.$route.query.id,
            //     method: "get"
            // }).then(result => {
            //     if (result.resp_code == 0) {
            //         const { data } = result;
            //         this.skuList = data
            //     }
            // })
        },
        // 获取当前选中sku相应数据
        getSkuData(indexes) {
            // let params = {
            //     indexes: indexes
            // }
            // axios({
            //     url: "/api-admin/productSku/" + this.$route.query.id,
            //     method: "get",
            //     params,
            // }).then(result => {
            //     if (result.resp_code == 0) {
            //         const { data } = result;
            //         this.skuData = data
            //     }
            // })
        },
        // 删除SKU
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    axios({
                        url: "/api-admin/productSku/" + row.id,
                        method: "delete"
                    }).then(result => {
                        this.$message.success(result.resp_msg);
                        if (result.resp_code == 0) {
                            this.biandong.splice(index, 1);
                        }


                    })

                })
                .catch(() => { });
        },
        // 添加规格
        addSpecifications() {
            this.specificationsList.push({ name: "", unit: '', values: [''] })
        },
        // 保存规格
        saveSpecifications() {
            this.skuList = JSON.parse(JSON.stringify(this.specificationsList))
            // Object.assign({}, this.specificationsList)
        },
        //保存当前sku到临时数组
        saveSku() {
            let is = false;
            for (var u = 0; u < this.skulistAll.length; u++) {
                console.log("进来了")
                if (this.skuData.speciaId == this.skulistAll[u].speciaId) {
                    is = true;
                    this.skulistAll[u] = this.skuData;
                    break;
                } else {
                    is = false;
                }
            }
            if (!is) {
                this.skulistAll.push(this.skuData);
            }
            console.log("this.skulistAll", this.skulistAll)
        },
        // 删除规格
        deleteSpecificationsItem(item, index) {
            this.$confirm('确定要删除此规格吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    // axios({
                    //     url: "/api-admin/productSku/" + row.id,
                    //     method: "delete"
                    // }).then(result => {
                    //     this.$message.success(result.resp_msg);
                    //     if (result.resp_code == 0) {
                    //         this.biandong.splice(index, 1);
                    //     }


                    // })
                    this.specificationsList.splice(index, 1)
                })
                .catch(() => { });

        },
        // 添加规格值
        addSpecificationsValue(values) {
            values.push('')
        },
        // 删除规格值
        deleteSpecificationsValue(values, index1) {
            this.$confirm('确定要删除此规格值吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    // axios({
                    //     url: "/api-admin/productSku/" + row.id,
                    //     method: "delete"
                    // }).then(result => {
                    //     this.$message.success(result.resp_msg);
                    //     if (result.resp_code == 0) {
                    //         this.biandong.splice(index, 1);
                    //     }


                    // })
                    values.splice(index1, 1)
                })
                .catch(() => { });
        },
        // 改变sku相应规格值
        // changeSpecification(index, index1) {
        //     this.$set(this.selectArr, index, index1)
        //     console.log("this.selectArr", this.selectArr)
        //     console.log("this.selectArr", this.selectArr.length)
        //     console.log("this.selectArr0", index)
        //     console.log("this.selectArr1", index1)
        //     console.log("this.name", name)
        //     console.log("this.value", value)
        //     console.log("this.skuList", this.skuList)
        //     let all = [];
        //     let vv = ''
        //     for (var i = 0; i < this.selectArr.length; i++) {
        //         // vv += "-" + this.selectArr[i]

        //         // all.push({key:this.skuList[i].name,value:this.this.skuList[i].})
        //         if (vv.length > 0) {
        //             console.log("后面是这里-")
        //             vv = vv + "-" + this.selectArr[i].toString()
        //         } else {
        //             console.log("第一次是这里-")
        //             vv = this.selectArr[i].toString()
        //         }
        //         console.log("vvvvvvvvvvvvvv", vv)
        //     }
        //     // for (var t = 0; t < this.selectArr.length; t++) {
        //     //     console.log("第一层进来" + t + "次")

        //     //     all.push({ key: this.skuList[t].name, value: this.skuList[t].values[this.selectArr[t]] })
        //     // }   // this.skuData.speciaId = vv

        //     // this.skuData.spDataList = all
        //     // console.log("-45386758", vv)// console.log("allllllllllll", all)

        //     for (var u = 0; u < this.skulistAll.length; u++) {
        //         console.log("进来了")
        //         if (vv == this.skulistAll[u].speciaId) {
        //             console.log("匹配到")
        //             this.skuData = this.skulistAll[u];
        //             break;
        //         } else {
        //             console.log("没有匹配到")
        //             this.skuData = {};
        //             this.skuData.speciaId = vv

        //         }
        //     }
        //     // this.$set(this.selectArr, index, index1)
        // },
        changeSpecification(index, index1) {

            this.$set(this.selectArr, index, index1)
            console.log("this.selectArr", this.selectArr[0])
            console.log("this.selectArr", this.selectArr.length)
            console.log("this.selectArr0", index)
            console.log("this.selectArr1", index1)
            let all = [];
            let vv = ''
            for (var i = 0; i < this.selectArr.length; i++) {
                // vv += "-" + this.selectArr[i]
                if (vv.length > 0) {
                    console.log("后面是这里-")
                    vv = vv + "-" + this.selectArr[i].toString()
                } else {
                    console.log("第一次是这里-")
                    vv = this.selectArr[i].toString()
                }
                console.log("vvvvvvvvvvvvvv", vv)
            }
            for (var t = 0; t < this.selectArr.length; t++) {
                console.log("第一层进来" + t + "次")

                all.push({ key: this.skuList[t].name, value: this.skuList[t].values[this.selectArr[t]] })
            }   // this.skuData.speciaId = vv

            this.skuData.spDataList = all
            console.log("-45386758", vv)
            console.log("-this.skulistAll", this.skulistAll)
            if (this.skulistAll.length == 0) {
                this.skuData = { pic: '' };
                this.skuData.speciaId = vv
                this.skuData.spDataList = all
            } else {
                for (var u = 0; u < this.skulistAll.length; u++) {
                    console.log("进来了", vv)

                    if (vv == this.skulistAll[u].speciaId) {
                        console.log("匹配到")
                        this.skuData = this.skulistAll[u];
                        break;
                    } else {
                        console.log("没有匹配到")
                        this.skuData = { pic: '' };
                        this.skuData.speciaId = vv
                        this.skuData.spDataList = all
                    }
                }
            }

            console.log("this.skuData.speciaId", this.skuData.speciaId)
            // this.$set(this.selectArr, index, index1)
        },
        // 下一步
        nextStep() {
            if (this.stepIndex < 2) this.stepIndex++
        },
        // 上一步
        previousStep() {
            if (this.stepIndex > 1) this.stepIndex--
        },
        saveEdit() {
            let data = this.editProduct
            console.log("editProduct>>>", this.editProduct)
            console.log("skuList>>>", this.skuList) //这个是规格productSpecialVos
            console.log("skuData>>>", this.skuData) //这个是规格值
            console.log("zifu>>>", this.zifu) //这个是规格值
            data.albumPics = this.zifu
            data.productSpecialVos = this.skuList
            data.skuList = this.skulistAll
            console.log("data------------>", data)
            // return
            axios({
                url: "/admin/product/save",
                method: "post",
                data
            }).then(result => {
                console.log("================>", result)
                if (result.code == 0) {
                    this.$message.success(result.errMsg != '' ? result.errMsg : '成功');
                    bus.$emit('close_current_tags');
                    this.$router.push('/curriculumList');

                } else {
                    this.$message.error(result.errMsg != '' ? result.errMsg : '失败');
                    // this.$router.push('/product');
                }

            })



        },
        handleChange(value) {
            this.editProduct.categoryId = value.join(',')
            // this.editProduct.categoryIds = value.join(',')
            this.editProduct.categoryName = this.$refs.myCascader.getCheckedNodes()[0].pathLabels.join(',')
        },
        uploadHttp({ file }) {
            this.$ossClient.ossPut(file).then(res => {
                // console.log("文本进入这里")
                // console.log("resresresres", res)
                // // 获取富文本组件实例
                // let quill = this.$refs.QuillEditor[this.ck].quill;
                // console.log("quill", this.$refs)
                // // 如果上传成功
                // if (res) {
                //     // 获取光标所在位置
                //     let length = quill.getSelection().index;
                //     // 插入图片，res为服务器返回的图片链接地址
                //     quill.insertEmbed(length, 'image', res.requestUrls[0])
                //     // 调整光标到最后
                //     quill.setSelection(length + 1)
                // } else {
                //     // 提示信息，需引入Message
                //     Message.error('图片插入失败')
                // }


                console.log("文本进入这里")
                console.log("resresresres", res)
                // 获取富文本组件实例
                let quill = this.$refs.QuillEditor.quill;
                // 如果上传成功
                if (res) {
                    // 获取光标所在位置
                    let length = quill.getSelection().index;
                    // 插入图片，res为服务器返回的图片链接地址
                    quill.insertEmbed(length, 'image', res.requestUrls[0])
                    // 调整光标到最后
                    quill.setSelection(length + 1)
                } else {
                    // 提示信息，需引入Message
                    Message.error('图片插入失败')
                }
            })
        },

        uploadHttp2({ file }) {
            let _this = this;
            this.$ossClient.ossPut(file).then(res => {
                console.log("jin2222 ")
                _this.editProduct.pic = res.requestUrls[0]
                console.log("this.editProduct.pic", this.editProduct.pic)
            })
        },
        uploadHttp3({ file }) {
            console.log("上传轮播再这里")

            this.$ossClient.ossPut(file).then(res => {
                this.carouselatr.push({ name: file.name, url: res.requestUrls[0] })
                let vv = ''
                for (var i = 0; i < this.carouselatr.length; i++) {
                    if (vv.length > 0) {

                        vv = vv + "," + this.carouselatr[i].url
                    } else {
                        vv = this.carouselatr[i].url
                    }

                }
                this.zifu = vv
                // if (this.zifu.length > 0) {

                //     this.zifu = this.zifu + "," + res.requestUrls[0]
                // } else {
                //     this.zifu = res.requestUrls[0]
                // }
                console.log("this.zifu", this.zifu)
            })
        },
        handleUploadSuccess2(res) {
            console.log("jin ")
            this.editProduct.pic = res.data[0].url
        },
        // handleUploadSuccess3(res) {
        //     this.skuData.pic = res.data[0].url
        //     console.log('----------------------------------', this.skuData.pic)
        // },
        uploadHttp4({ file }) {
            let _this = this;
            this.$ossClient.ossPut(file).then(res => {
                _this.skuData.pic = res.requestUrls[0]

            })
        },
        uploadVideoProcess(event, file, fileList) {
            this.videoFlag = true;
            this.videoUploadPercent = parseInt(file.percentage.toFixed(0));
        },
        handleUploadVideoSuccess(res) {
            this.videoFlag = false
            this.mainVideo = res.data[0].url
        },
        handleVideoPreview() {
            this.mainVideoVisible = true
        },
        handleUploadSuccess(res) {
            console.log("文本进入这里")
            console.log("resresresres", res)
            // 获取富文本组件实例
            let quill = this.$refs.QuillEditor.quill;
            // 如果上传成功
            if (res) {
                // 获取光标所在位置
                let length = quill.getSelection().index;
                // 插入图片，res为服务器返回的图片链接地址
                quill.insertEmbed(length, 'image', res.data[0].url)
                // 调整光标到最后
                quill.setSelection(length + 1)
            } else {
                // 提示信息，需引入Message
                Message.error('图片插入失败')
            }
        },
        //删除轮播图
        // handleRemove(file, fileList) {
        //     var _this = this;
        //     let str = "";
        //     for (var i = 0; i < fileList.length; i++) {
        //         if (!fileList[i].response) {
        //             str += fileList[i].url + ","
        //         } else {
        //             str += fileList[i].response.data[0].url + ","
        //         }
        //     }
        //     if (str.length > 0) { str = str.substr(0, str.length - 1); }
        //     _this.editProduct.albumPics = str;

        // },
        handleRemove(file, fileList) {
            console.log("删除进这里")
            let vv = ""
            // console.log("this.fileList", fileList)
            // console.log("this.file", file)
            // for (var i = 0; i < fileList.length; i++) {
            //     vv = vv + ',' + fileList[i].response.data[0].url
            // }
            // this.zifu = vv
            // console.log("zifu", this.zifu)

            // let tt=[];

            for (var t = 0; t < this.carouselatr.length; t++) {

                if (this.carouselatr[t].name == file.name) {
                    console.log("进来次数", t)
                    this.carouselatr.splice(t, 1)
                } else {
                    console.log("出去次数", t)
                    if (vv.length > 0) {

                        vv = vv + "," + this.carouselatr[t].url
                    } else {
                        vv = this.carouselatr[t].url
                    }
                }
            }
            this.zifu = vv

            console.log("vv", vv)
            console.log("this.zifu", this.zifu)

            //  this.carouselatr.push({ name: file.name, url: res.requestUrls[0] })
            //     let vv = ''
            //     for (var i = 0; i < this.carouselatr.length; i++) {
            //         if (vv.length > 0) {

            //             vv = vv + "," + this.carouselatr[i].url
            //         } else {
            //             vv = this.carouselatr[i].url
            //         }

            //     }
            //     this.zifu = vv
        },
        //上传轮播图
        // fz(response, file, fileList) {
        //     var _this = this;
        //     let str = "";
        //     for (var i = 0; i < fileList.length; i++) {
        //         if (!fileList[i].response) {
        //             str += fileList[i].url + ","
        //         } else {
        //             str += fileList[i].response.data[0].url + ","
        //         }
        //     }
        //     if (str.length > 0) { str = str.substr(0, str.length - 1); }

        //     _this.editProduct.albumPics = str;

        // },
        // 上传遮罩
        zzUpload(event, file, fileList) {
            Loading.service(this.loaddingTip);
            if (event.percent == 100) {
                setTimeout(function () {
                    Loading.service(this.loaddingTip).close()
                }, 1000);

            }
        },
        // 预览轮播图片
        handlePictureCardPreview(file) {
            console.log("file", file)
            this.largeImg = file.url;
            this.carouselVisible = true;
        },
    }
}
</script>
<style lang="scss" scoped>
.steps {
    width: 100%;
    margin-top: 17px;
    zoom: 1;
    color: #333;
    font-size: 14px;
}
.steps::after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    line-height: 0;
}
.step {
    width: 220px;
    height: 40px;
    background: #dcdfe6;
    position: relative;
    .step_b {
        line-height: 40px;
        text-align: center;
    }
}
//旋转的小方形盒子
.rotateBox {
    content: '';
    border: 20px solid #fff;
    border-bottom: none;
    border-left: none;
    background-color: #dcdfe6;
    height: 36px;
    width: 36px;
    position: absolute;
    display: block;
    top: -7px;
    right: 30px;
    z-index: 10;
    transform: rotate(45deg);
}
.step_l {
    margin-right: 0;
}
.active {
    background: #1b93f8 !important;
    color: #fff;
}
//被激活的步骤条的样式
.active .rotateBox {
    color: #fff;
    background-color: #1b93f8;
    content: '';
    border: 20px solid #fff;
    border-bottom: none;
    border-left: none;
    height: 36px;
    width: 36px;
    position: absolute;
    display: block;
    top: -7px;
    right: 30px;
    z-index: 10;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    // -ms-transform:rotate(45deg);  /* IE 9 */
    // -moz-transform:rotate(45deg);   /* Firefox */
    // -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
    // -o-transform:rotate(45deg);   /* Opera */
}
//最后一步取消向右箭头
.step:last-child .rotateBox {
    content: '';
    border: none;
    height: 0;
    width: 0;
    z-index: 11;
}
.container_title {
    color: #333;
    -webkit-text-stroke: 0.2px;
    font-size: 14px;
    margin-bottom: 15px;
}

.product-type {
    position: relative;
    width: 168px;
    padding: 5px;
    border: 1px solid #1b93f8;
    border-radius: 4px;
    .product-type-img {
        width: 64px;
        height: 64px;
        border-radius: 4px;
    }
    .product-select {
        position: absolute;
        width: 16px;
        height: 16px;
        right: -6px;
        bottom: -6px;
    }
}
/deep/.el-upload-list--picture-card .el-upload-list__item {
    width: 80px !important;
    height: 80px !important;
}
/deep/.el-upload--picture-card {
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
}
::v-deep {
    .avatar-uploader {
        width: 80px;
        height: 80px;
        .el-upload {
            width: 80px;
            height: 80px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .el-upload:hover {
            border-color: #409eff;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
        }
        .avatar {
            width: 80px;
            height: 80px;
            display: block;
        }
    }
    .video-uploader {
        width: 256px;
        height: 180px;
        .el-upload {
            width: 256px;
            height: 180px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .el-upload:hover {
            border-color: #409eff;
        }
        .video-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 256px;
            height: 180px;
            line-height: 180px;
            text-align: center;
        }
        .video {
            width: 256px;
            height: 180px;
            display: block;
        }
    }
}
.t-td {
    padding: 5px 0;
    .el-input,
    .el-select {
        width: 80%;
    }
}
.specifications-box {
    margin-bottom: 20px;
}
.specifications-item {
    position: relative;
    background: #f5f5f5;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 15px;
    margin-top: 15px;
    .el-icon-error {
        position: absolute;
        right: -6px;
        top: -6px;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.5);
    }
}
.specifications-value {
    .input-box {
        position: relative;
        width: 25%;
        margin-right: 15px;
        .el-icon-error {
            position: absolute;
            right: -6px;
            top: -4px;
            color: rgba(0, 0, 0, 0.5);
        }
    }
}
.sku-box {
    .specifications-value-box {
        margin-bottom: 20px;
        .specifications-title {
            color: #333;
            -webkit-text-stroke: 0.2px;
            font-size: 14px;
        }
        .specifications-value {
            text-align: center;
            min-width: 50px;
            padding: 2px 4px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            color: #999;
            margin-right: 20px;
            &.active {
                color: #fff;
                border: 1px solid #1b93f8;
                background: #1b93f8;
            }
        }
    }
    .specifications-value-box + .specifications-value-box {
        margin-top: 10px;
    }
}
</style>